<template>
    <div>
        <el-page-header content="添加用户" icon="" title="用户管理"></el-page-header>
        <el-form
        :model="userForm"
        :rules="userFormRules"
        ref="userFormRef"
        label-width="80px"
        class="demo-ruleForm"
        >
            <el-form-item label="用户名" prop="username">
                <el-input v-model="userForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="userForm.password"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="role">
                <el-select v-model="userForm.role" placeholder="请选择权限" style="width:100%">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="简介" prop="introduction">
                <el-input v-model="userForm.introduction" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="头像">
                <div class="box-card">
                    <img class="the_img" :src="userForm.avatar" alt="">
                    <div class="btn-box">
                        <input type="file" accept="image/*" style="display: none" id="iptRef" @change="onFileChange" />
                        <el-button type="primary" icon="el-icon-plus" @click="chooseImg">选择图片</el-button> 
                    </div>
                </div>
             </el-form-item> 
            <el-button style="margin-left:48%" type="primary" @click="submitForm()">添加用户</el-button>
        </el-form>
    </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import {ElMessage} from 'element-plus'
import {addUserAPI, updateUserAvatarAPI} from '@/api'

const userFormRef=ref()
const userForm=reactive({
    id:"",
    username:'',
    password:'',
    role:'', //1 超级管理员   2 管理员
    introduction:' ',
    avatar:' '
})

// 权限选择
const options=[
    {label:'超级管理员',value:1},
    {label:'管理员',value:2},
]

const userFormRules=reactive({
    username: [
      { required: true, message: '请输入姓名', trigger: 'blur' },
      { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'},
    ],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    introduction: [{ required: true, message: '请输入简介', trigger: 'blur' }],
    role: [{ required: true, message: '请权限权限', trigger: 'blur' }]
})
// 添加用户
const submitForm=()=>{
    userFormRef.value.validate(async valid=>{
        if(valid){
            const {data:res}=await addUserAPI(userForm)
            const { data: res1 } = await updateUserAvatarAPI(userForm.avatar,userForm.id)
            if (res.status !== 0 && res1.status!==0) {
                ElMessage.error('添加失败');
                return
            }
            ElMessage.success('添加成功')
            console.log('res',res);
        }
    })
}


// 图片
const chooseImg=function () {
    // 模拟点击行为
    document.getElementById('iptRef').click()
  }
const onFileChange=function (e) {
    const files = e.target.files // 拿到用户选择的文件数组
    console.log(files);
    if (files.length === 0) {
     
    } else {
      // 解决方案2：文件->base64字符串（此字符串是可以发给后台的）
      const fr = new FileReader()
      fr.readAsDataURL(files[0]) // 传入文件对象开始读
      fr.onload = (e) => { 
        userForm.avatar = e.target.result // 赋予给变量，让他显示在img的src里
      }
    }
  }
</script>

<style lang="scss" scoped>
.demo-ruleForm{
    margin-top: 50px;
}

// 图片
.btn-box {
  margin-top: 10px;
}
.preview {
  object-fit: cover;
}
.the_img{
    width: 150px;
    height: 150px;
}
</style>